<template>
  <div id="leftOneChart">
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      AlarmStatisticList: [
        {
          "DateTime": "08-17",
          "AlarmCount": 81,
          "AlarmCancelCount": 1,
          "AlarmingCount": 81,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 81
        },
        {
          "DateTime": "08-18",
          "AlarmCount": 91,
          "AlarmCancelCount": 2,
          "AlarmingCount": 91,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 91
        },
        {
          "DateTime": "08-19",
          "AlarmCount": 108,
          "AlarmCancelCount": 0,
          "AlarmingCount": 108,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 108
        },
        {
          "DateTime": "08-20",
          "AlarmCount": 108,
          "AlarmCancelCount": 0,
          "AlarmingCount": 108,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 108
        },
        {
          "DateTime": "08-21",
          "AlarmCount": 108,
          "AlarmCancelCount": 0,
          "AlarmingCount": 108,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 108
        },
        {
          "DateTime": "08-22",
          "AlarmCount": 81,
          "AlarmCancelCount": 0,
          "AlarmingCount": 81,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 81
        },
        {
          "DateTime": "08-23",
          "AlarmCount": 54,
          "AlarmCancelCount": 0,
          "AlarmingCount": 54,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 54
        },
        {
          "DateTime": "08-24",
          "AlarmCount": 54,
          "AlarmCancelCount": 0,
          "AlarmingCount": 54,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 54
        },
        {
          "DateTime": "08-25",
          "AlarmCount": 27,
          "AlarmCancelCount": 0,
          "AlarmingCount": 27,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 27
        },
        {
          "DateTime": "08-26",
          "AlarmCount": 27,
          "AlarmCancelCount": 0,
          "AlarmingCount": 27,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 27
        },
        {
          "DateTime": "08-27",
          "AlarmCount": 27,
          "AlarmCancelCount": 0,
          "AlarmingCount": 27,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 27
        },
        {
          "DateTime": "08-28",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "08-29",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "08-30",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "08-31",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "09-01",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "09-02",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "09-03",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "09-04",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "09-05",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "09-06",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "09-07",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "09-08",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "09-09",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "09-10",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "09-11",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "09-12",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "09-13",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "09-14",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "09-15",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "09-16",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        },
        {
          "DateTime": "09-17",
          "AlarmCount": 0,
          "AlarmCancelCount": 0,
          "AlarmingCount": 0,
          "HighAlarmCount": 0,
          "MidAlarmCount": 0,
          "LowAlarmCount": 0
        }
      ]
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById('leftOneChart'))

      // 准备图表数据
      const dates = this.AlarmStatisticList.map(item => item.DateTime)
      const alarmCounts = this.AlarmStatisticList.map(item => item.AlarmCount)

      const option = {
        // 工具箱配置 - 右上角功能区
        toolbox: {
          feature: {
            // 图表类型切换
            magicType: {
              type: ['bar', 'line'],
              title: {
                bar: '切换为柱状图',
                line: '切换为折线图'
              }
            },
            // 搜索功能（自定义图标）
            mySearch: {
              show: true,
              title: '搜索',
              icon: 'M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.9zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116 65.6-158.4C296 211.3 352.2 188 412 188s116 23.3 158.4 65.6S636 352.2 636 412s-23.3 116-65.6 158.4z',
              onclick: () => {
                this.handleSearch()
              }
            },
          },
          right: '-5px',
          top: '-5px'
        },
        // 图例
        legend: {
          data: ['近一个月每天报警数量', '报警取消数量'],
          top: '30px',
          left: 'center',
          selected: {
            '近一个月每天报警数量': true,
            '报警取消数量': false
          }
        },
        // 网格配置
        grid: {
          left: '10px',
          right: '10px',
          top: '70px', // 为顶部dataZoom留出空间
          bottom: '30px',
          containLabel: true
        },
        // X轴配置
        xAxis: {
          type: 'category',
          data: dates,
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          },
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            color: '#666',
            fontSize: 12
          }
        },
        // Y轴配置
        yAxis: {
          type: 'value',
          minInterval: 1,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#666'
            }
          },
          axisTick: {
            show: true,
            length: 4, // 刻度线长度
            lineStyle: {
              color: '#666',
              type: 'solid' // 实线
            },
            inside: false // 刻度线向外（向左）
          },
          axisLabel: {
            color: '#666',
            fontSize: 12
          },
          // Y轴虚线网格
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed', // 虚线
              color: '#e0e0e0'
            }
          }
        },
        // 系列数据
        series: [
          {
            name: '近一个月每天报警数量',
            type: 'bar',
            data: alarmCounts,
            itemStyle: {
              color: '#3298db'
            }
          },
          {
            name: '报警取消数量',
            type: 'bar',
            data: this.AlarmStatisticList.map(item => item.AlarmCancelCount),
            itemStyle: {
              color: '#419f3c'
            }
          }
        ],
        // 底部区间调节功能
        dataZoom: [
          {
            type: 'slider',
            show: true,
            start: 0,
            end: 100,
            height: 15,
            bottom: 10,
            left: '20px',
            right: '10px',
            handleStyle: {
              color: '#5470c6'
            },
            textStyle: {
              color: '#666',
              fontSize: 10
            },
            borderColor: 'transparent',
            backgroundColor: '#f5f5f5'
          },
          {
            type: 'inside',
            start: 0,
            end: 100
          }
        ],
        // 提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            let result = params[0].axisValue + '<br/>'
            params.forEach(param => {
              result += param.marker + param.seriesName + ': ' + param.value + '<br/>'
            })
            return result
          }
        }
      }

      chart.setOption(option)

      // 响应式调整
      window.addEventListener('resize', () => {
        chart.resize()
      })
    },

    // 搜索功能处理函数
    handleSearch() {
      // 这里可以跳转到搜索页面或打开搜索弹窗
      console.log('搜索功能被点击')
      // 示例：跳转到搜索页面
      // this.$router.push('/search')
      // 或者触发父组件的搜索事件
      this.$emit('search')
    },
  }
}
</script>

<style lang="scss" scoped>
#leftOneChart {
  width: 100%;
  height: 100%;
  min-height: 300px;
  padding: 0;
  margin: 0;
}
</style>
